<template>
<div class="topbar">

    <!-- 960px -->
    <div class="nav-pc">
        
        <nav class='nav-pc-content'>

            <router-link :exact="item.exact" class='link nav-pc-item'  :to="item.path"  v-for="(item, index) of navConfig" :key='index'>
                {{item.label}}
            </router-link>

        </nav>

        <div class="nav-pc-item sub-fn">

                <div class="email">
                    电邮
                </div>
                
                <div class="facebook">
                    <i></i>
                </div>
                
        </div>
        
        
    </div>


    <!-- 768px -->
    <div class="nav-phone">

        
     <div class="menu" @click='switchMenu'>
        <i class="iconfont icon-menu"></i>
     </div>

     <transition name='up-down'>
     
      <div class="menu-dropdown" v-if="showMenu">

           <nav class='nav-phone-content' @click='switchMenu'>

            <router-link :exact="item.exact" class='link nav-phone-item'  :to="item.path"  v-for="(item, index) of navConfig" :key='index'>
                {{item.label}}
            </router-link>

            </nav>

            <div class="nav-phone-item sub-fn">

                <div class="email">
                    电邮
                </div>
                
                <div class="facebook">
                    <i></i>
                    <!-- 脸书 -->
                </div>
                    
            </div>
        
      </div>
      
     </transition>

        
    </div>

    
</div>
</template>

<script lang='ts'>
import {Component, Vue, Prop} from 'vue-property-decorator';


export interface navItem{

    label: string,
    path: string,
    exact?: boolean
    
    
}

@Component
export default class Topbar extends Vue{

    @Prop() 
    navConfig?: Array<navItem>

    showMenu: Boolean = false

    switchMenu(e:any){
        this.showMenu = !this.showMenu;
    }

}


</script>

<style scoped lang='less'>

.router-link-active{}

.topbar{
    padding: 10*@rem;
    background: url('../../assets/topbar-bg.png') no-repeat;
    background-size: 100% 100%; 
}

.nav-pc{
    .max-page-width();
    
    display: flex;
    justify-content: space-between;
    align-items: center;    
}

.nav-pc-content{

    flex: 1 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .link{
        color: @fontColorLight;
    }
    
}

.nav-pc-item{
    display: inline-block;
    padding: 0 10*@rem;
    font-size: 20*@rem;
}

.sub-fn{
    @w: 140*@rem;
    flex: 0 0 @w;
    display: flex;
    justify-content: center;
    align-items: center;
    
    margin-left: 20*@rem;
    padding: 6*@rem;
    width: @w;
    border-left: 1*@rem solid @fontColorLight;
    align-items: baseline;
    border-radius: 30*@rem;
    background: #fff;
    

    & > div{
        
        text-align: center;
        color: #008ed6;
    }

    
}

.email,
.facebook{
    display: inline-block;
    
    text-align: center;
}

@iconW: 56%;

.email{
    width: @iconW;
    border-right: 1*@rem solid #008ed6;
}

.facebook{
    width: 100% - @iconW;
    align-items: center;
    &>i{
        display: inline-block;
        width: 20*@rem;
        height: 20*@rem;
        background: url('../../assets/icon-facebook.png') center  no-repeat;
        background-size: auto 100%;
    }
}



.nav-phone{
    display: none;
}

/*  760px  */

@media (max-width: 768px){

    .nav-pc{
        display: none;
    }
    
    .nav-phone{
        position: relative;
        display: block;
        padding: 6*@rem 20*@rem;
        
        .menu{
            // float: right;
            font-size: 18*@rem;
            text-align: right;
            color: @fontColorLight;
        }
    
        .menu-dropdown{
            position: absolute;
            top: 100%;
            right: 0;
            
            width: 100%;
            background: @mainColor;
        }
        .nav-phone-item{
            display: block;
            padding: 16*@rem 26*@rem;
            text-align: center;
            font-size: 16*@rem;
            color: @fontColorLight;
        }

        .nav-phone-item + .nav-phone-item{
            border-top: 1*@rem solid @fontColorLight;
        }
        
        .sub-fn{
            display: none;
        }
        
    }
    
}


</style>